import React from 'react';
import { useTranslation } from 'react-i18next';
import LoginLanguageSelector from './LoginLanguageSelector';

const LoginTest = () => {
  const { t } = useTranslation();

  return (
    <div style={{
      position: 'relative',
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      backgroundImage: 'url("https://img.freepik.com/free-photo/workspace-workplace-office-table_144627-40148.jpg")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      padding: '20px'
    }}>
      
      {/* 语言选择器 - 位置测试 */}
      <div style={{
        position: 'absolute',
        top: '20px',
        right: '20px',
        zIndex: 100
      }}>
        <LoginLanguageSelector />
      </div>

      {/* 登录表单模拟 */}
      <div style={{
        width: '100%',
        maxWidth: '400px',
        background: 'rgba(255, 255, 255, 0.95)',
        borderRadius: '8px',
        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
        overflow: 'hidden',
        animation: 'fadeIn 0.5s ease-in-out'
      }}>
        <div style={{ padding: '24px' }}>
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center', 
            marginBottom: '24px' 
          }}>
            <h2 style={{ 
              fontSize: '22px', 
              fontWeight: '500', 
              color: '#333', 
              margin: 0 
            }}>
              {t('login.title')}
            </h2>
          </div>

          <div style={{ marginBottom: '16px' }}>
            <label style={{ 
              display: 'block', 
              marginBottom: '8px', 
              color: '#666', 
              fontSize: '14px' 
            }}>
              {t('login.phone')}
            </label>
            <input 
              type="tel" 
              placeholder={t('login.phonePlaceholder')}
              style={{
                width: '100%',
                padding: '12px 16px',
                border: '1px solid #d9d9d9',
                borderRadius: '6px',
                fontSize: '14px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <div style={{ marginBottom: '16px' }}>
            <label style={{ 
              display: 'block', 
              marginBottom: '8px', 
              color: '#666', 
              fontSize: '14px' 
            }}>
              {t('login.password')}
            </label>
            <input 
              type="password" 
              placeholder={t('login.passwordPlaceholder')}
              style={{
                width: '100%',
                padding: '12px 16px',
                border: '1px solid #d9d9d9',
                borderRadius: '6px',
                fontSize: '14px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <button style={{
            width: '100%',
            padding: '12px',
            backgroundColor: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '6px',
            fontSize: '16px',
            fontWeight: '500',
            cursor: 'pointer',
            transition: 'background-color 0.3s ease',
            marginBottom: '16px'
          }}>
            {t('login.loginButton')}
          </button>

          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            fontSize: '14px' 
          }}>
            <a href="#" style={{ color: '#1890ff', textDecoration: 'none' }}>
              {t('login.forgotPassword')}
            </a>
            <a href="#" style={{ color: '#1890ff', textDecoration: 'none' }}>
              {t('login.register')}
            </a>
          </div>
        </div>
      </div>

      {/* 位置指示器 */}
      <div style={{
        position: 'absolute',
        top: '10px',
        left: '20px',
        background: 'rgba(255, 255, 255, 0.9)',
        padding: '10px 15px',
        borderRadius: '6px',
        fontSize: '14px',
        color: '#333',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
      }}>
        <div style={{ fontWeight: '600', marginBottom: '5px' }}>
          🎯 语言选择器位置测试
        </div>
        <div style={{ fontSize: '12px', color: '#666' }}>
          • 右上角固定位置<br/>
          • 高对比度背景<br/>
          • 完全行内样式
        </div>
      </div>
    </div>
  );
};

export default LoginTest; 